<template>
	<view>
		<view  class="jail">
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
				@scrolltolower="lower" @scroll="scroll">
				<view id="demo1" class="scroll-view-item uni-bg-red">A</view>
				<view id="demo2" class="scroll-view-item uni-bg-green">B</view>
				<view id="demo3" class="scroll-view-item uni-bg-blue">C</view>
			</scroll-view>
		</view>
	</view>

</template>

<script setup>
	
</script>

<style lang="scss">
	.scroll-Y {
		height: 300rpx;
		overflow: auto; // 一定要把overflow设置为auto，有些浏览器会自动设置为hidden，导致无法上下滚动了
	}
	.scroll-view-item {
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
		border: 1px beige solid;
	}     
	.uni-bg-red {
		background-color: red;
	}    
	.uni-bg-blue {
		background-color: blue;
	}    
	.uni-bg-green {
		background-color: green;
	}
</style>
